<template>
  <layout>
    <template #header>
      <head-top signin-up="home">
        <template #logo>
          <span class="head_logo" @click="reload">ele.me</span>
        </template>
      </head-top>
    </template>
    <template #content>
      <div class="content">
        <!-- head -->
        <!-- city-list -->
        <nav class="city_nav">
          <div class="city_tip">
            <span>当前定位城市：</span>
            <span>定位不准时，请在城市列表中选择</span>
          </div>
          <!-- guessCity 后台api ip自动定位城市 点击城市切换到详细地址选择页-->
          <router-link
            v-show="guessCity"
            :to="'/city/' + guessCityid"
            class="guess_city"
          >
            <span>{{ guessCity }}</span>
            <svg-icon filename="arrow-right" />
          </router-link>
        </nav>
        <!-- 热门城市列表 -->
        <section class="hot_city_container">
          <h4 class="city_title">热门城市</h4>
          <div class="citylistul clear">
            <!-- :to="'/city/' + item.id"  点击城市切换到详细地址选择页 -->
            <router-link
              v-for="item in hotcity"
              :to="'/city/' + item.id"
              :key="item.id"
            >
              {{ item.name }}
            </router-link>
          </div>
        </section>
        <!-- 全部城市列表 -->
        <section class="group_city_container" ref="wrapperMenu">
          <ul class="letter_classify">
            <li
              v-for="(value, key, index) in sortgroupcity"
              :key="key"
              class="letter_classify_li"
            >
              <h4 class="city_title">
                {{ key }}
                <span v-if="index == 0">（按字母排序）</span>
              </h4>
              <div class="groupcity_name_container citylistul clear">
                <!-- 遍历后台获取的城市数据 -->
                <router-link
                  v-for="item in value"
                  :to="'/city/' + item.id"
                  :key="item.id"
                  class="ellipsis"
                >
                  {{ item.name }}
                </router-link>
              </div>
            </li>
          </ul>
        </section>
      </div>
    </template>
  </layout>
</template>

<script setup>
import {
  cityGuess,
  groupcity as getgroupcity,
  hotcity as gethotcity,
} from "@/api";
import HeadTop from "@/components/header/HeadTop";
import { computed, onMounted, reactive, toRefs } from "vue";
import Layout from "../layout/layout.vue";
const state = reactive({
  guessCity: "",
  guessCityid: "",
  hotcity: [],
  groupcity: {},
});

let { guessCity, guessCityid, hotcity, groupcity } = toRefs(state);

// computed

let sortgroupcity = computed(() => {
  let sortobj = {};
  for (let i = 65; i <= 90; i++) {
    if (state.groupcity[String.fromCharCode(i)]) {
      sortobj[String.fromCharCode(i)] = state.groupcity[String.fromCharCode(i)];
    }
  }
  return sortobj;
});

// methods
let reload = () => {
  window.location.reload();
};

// 钩子函数
onMounted(() => {
  // 获取当前城市 ，promise 直接 then 就可以获取回调数据
  cityGuess().then((res) => {
    state.guessCity = res.name;
    state.guessCityid = res.id;
  });

  //获取热门城市
  gethotcity().then((res) => {
    state.hotcity = res;
  });

  //获取所有城市
  getgroupcity().then((res) => {
    state.groupcity = res;
  });
});
</script>

<style lang="scss" scoped>
.content {
  padding: 10px 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.head_logo {
  font-weight: 400;
  font-size: 15px;
  @include flex-r();
  color: #fff;
}
.city_nav {
  padding-top: 10px;
  border-top: 1px solid $bc;
  background-color: #fff;
  margin-bottom: 6px;
  .city_tip {
    @include fj;
    padding: 0 7px;
    span:nth-of-type(1) {
      @include sc(8px, #666);
    }
    span:nth-of-type(2) {
      font-weight: 900;
      @include sc(7px, #9f9f9f);
    }
  }
  .guess_city {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 28px;
    padding: 0 7px;
    border-top: 1px solid $bc;
    border-bottom: 2px solid $bc;
    @include font(12px, 28px);
    span:nth-of-type(1) {
      color: $blue;
    }
    .arrow_right {
      @include wh(9px, 9px);
      fill: #999;
    }
  }
}
.hot_city_container {
  background-color: #fff;
  margin-bottom: 6px;
}
.citylistul {
  a {
    float: left;
    text-align: center;
    color: $blue;
    border-bottom: 1px solid $bc;
    border-right: 1px solid $bc;
    @include wh(25%, 28px);
    @include font(9px, 28px);
  }
  a:nth-of-type(4n) {
    border-right: none;
  }
}
.city_title {
  color: #666;
  font-weight: 400;
  text-indent: 7px;
  border-top: 2px solid $bc;
  border-bottom: 1px solid $bc;
  @include font(8px, 23px, "Helvetica Neue");
  span {
    @include sc(7px, #999);
  }
}

.letter_classify_li {
  margin-bottom: 6px;
  background-color: #fff;
  border-bottom: 1px solid $bc;
  .groupcity_name_container {
    a {
      color: #666;
      .city_title:not(:first-child) {
        border-bottom: none;
      }
    }
    .ellipsis {
      padding-right: 10px;
    }
  }
}
</style>
